<template>
  <view class="chat-settings-container">
    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <view class="user-info">
        <image :src="userInfo.avatarUrl" mode="aspectFit" class="user-avatar" />
        <view class="user-details">
          <view class="user-name-container">
            <text class="user-name">{{ userInfo.name }}</text>
            <!-- <image v-if="userInfo.isVip" src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/2025-06-21/vip-icon.png" mode="aspectFit" class="vip-icon" /> -->
          </view>
          <text class="user-description">{{ userInfo.description }}</text>
        </view>
        <view class="follow-btn" @click="toggleFollow">
          <text>{{ isFollowing ? '已关注' : '关注' }}</text>
        </view>
      </view>
    </view>

    <!-- 设置项列表 -->
    <view class="settings-list">
      <!-- 置顶聊天 -->
      <view class="setting-item">
        <text class="setting-label">置顶聊天</text>
        <switch :checked="isPinned" @change="onPinChange" color="#07C160" />
      </view>

      <!-- 折叠消息 -->
      <view class="setting-item">
        <text class="setting-label">折叠消息</text>
        <switch :checked="isCollapsed" @change="onCollapseChange" color="#07C160" />
      </view>

      <!-- 加入黑名单 -->
      <view class="setting-item">
        <text class="setting-label">加入黑名单</text>
        <switch :checked="isBlacklisted" @change="onBlacklistChange" color="#07C160" />
      </view>

      <!-- 消息免打扰 -->
      <view class="setting-item">
        <text class="setting-label">消息免打扰</text>
        <switch :checked="isMuted" @change="onMuteChange" color="#07C160" />
      </view>

      <!-- 屏蔽群发消息 -->
      <view class="setting-item">
        <text class="setting-label">屏蔽群发消息</text>
        <switch :checked="isBlockedGroupMessages" @change="onBlockGroupMessagesChange" color="#07C160" />
      </view>
    </view>

    <!-- 举报反馈 -->
    <view class="report-section">
      <view class="report-item" @click="handleReport">
        <text class="report-label">举报反馈</text>
        <image src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/2025-06-21/arrow-right-icon.png" mode="aspectFit" class="arrow-icon" />
      </view>
    </view>
  </view>
</template>

<script>
import { getChatSettings } from '../../mock/chat-settings.js';

export default {
  data() {
    return {
      // 用户信息
      userInfo: {
        name: '',
        avatarUrl: '',
        description: '',
        isVip: false
      },
      // 设置项状态
      isFollowing: false,
      isPinned: false,
      isCollapsed: false,
      isBlacklisted: false,
      isMuted: false,
      isBlockedGroupMessages: true
    };
  },
  onLoad(options) {
    this.loadChatSettings();
    // 如果有传入用户ID参数，可以根据用户ID加载特定用户的设置
    if (options.userId) {
      console.log('Loading settings for user:', options.userId);
    }
  },
  methods: {
    // 加载聊天设置
    async loadChatSettings() {
      try {
        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 300));
        
        // 获取模拟的聊天设置数据
        const settingsData = getChatSettings();
        
        // 更新数据
        this.userInfo = settingsData.userInfo;
        this.isFollowing = settingsData.isFollowing;
        this.isPinned = settingsData.isPinned;
        this.isCollapsed = settingsData.isCollapsed;
        this.isBlacklisted = settingsData.isBlacklisted;
        this.isMuted = settingsData.isMuted;
        this.isBlockedGroupMessages = settingsData.isBlockedGroupMessages;
      } catch (error) {
        console.error('获取聊天设置失败:', error);
        uni.showToast({
          title: '获取聊天设置失败',
          icon: 'none'
        });
      }
    },

    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 切换关注状态
    toggleFollow() {
      this.isFollowing = !this.isFollowing;
      uni.showToast({
        title: this.isFollowing ? '关注成功' : '已取消关注',
        icon: 'success'
      });
    },

    // 切换置顶状态
    onPinChange(e) {
      this.isPinned = e.detail.value;
    },

    // 切换折叠状态
    onCollapseChange(e) {
      this.isCollapsed = e.detail.value;
    },

    // 切换黑名单状态
    onBlacklistChange(e) {
      this.isBlacklisted = e.detail.value;
      if (this.isBlacklisted) {
        // 如果加入黑名单，可以同步设置免打扰
        this.isMuted = true;
        uni.showToast({
          title: '已加入黑名单',
          icon: 'none'
        });
      }
    },

    // 切换免打扰状态
    onMuteChange(e) {
      this.isMuted = e.detail.value;
    },

    // 切换屏蔽群发消息状态
    onBlockGroupMessagesChange(e) {
      this.isBlockedGroupMessages = e.detail.value;
    },

    // 处理举报反馈
    handleReport() {
      // 跳转到举报反馈页面或显示举报反馈弹窗
      uni.showModal({
        title: '举报反馈',
        content: '确定要举报此用户吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '举报已提交',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './chat-settings.scss';
</style>